@import "_function";
@import "common";

header{
  .bc(#cf4cff);
  .p(0,30,0,30);
  .oh();
  .scan{
    .fl();
    background-image: url("../img/home_scan.png");
    .w(60);
    .h(70);
    .bgs(60,70);
    .m(8,0,8,8);
  }
  form{
      .w(500);
      .oh();
      .fl();
      .bdr(25);
      .h(50);
      .m(18,44,18,26);
      .bc(#fff);
      input{
        outline: none;
        .fl();
        .bn();
        .lh(50);
        .h(50);
        .w(430);
        .bc(#fff);
        .ti(38);
        .fs(26);
        .c(#616161);
      }
      button{
        .fl();
        background: url("../img/home_search_btn_06.png") transparent;
        .w(30);
        .h(30);
        .bs(30,30);
        .bn();
        .mt(10);
      }
    }
  .message{
      .fl();
      background-image: url("../img/home_message.png");
      .w(42);
      .h(70);
      .bgs(42,70);
      .mt(9);
    }
}
.banner{
  .w(750);
  .oh();
  .pr();
  ul{
    .pr;
    .l(0);
    .oh();
    .w(3000);
    li{
      .w(750);
      .fl();
      img{
        .w(750);
      }
    }
  }
  ol{
    .w(60);
    .h(26);
    .br(13);
    .bc(#e4e4e4);
    .pa;
    .l(325);
    .b(10);
    opacity: 0.6;
    .p(0,20,0,20);
    li{
      .fl;
      .mt(7);
      .m(7,3,7,3);
      background-image: url("../img/banner_dot1.png");
      .w(13);
      .h(13);
      .bgs(13,13);
    }
    .on{
      background-image: url("../img/banner_dot2.png");
    }
  }
}
.swiper-container{
  width: 100%;.pr;
  .swiper-slide{
    width: 100%;
    img{
      width: 100%;
    }
  }
  .swiper-pagination-bullets{
    .w(60);
    .h(26);
    .br(13);
    .bc(#e4e4e4);
    .pa;
    .l(325);
    .b(10);
    opacity: 0.6;
    .p(0,20,0,20);
    .swiper-pagination-bullet{
      .fl;
      .mt(7);
      .m(7,3,7,3);
      background-image: url("../img/banner_dot1.png");
      .w(13);
      .h(13);
      .bgs(13,13);
    }
    .swiper-pagination-bullet-active{
      background-image: url("../img/banner_dot2.png");
    }
  }
}
.nav{
  .p(30,30,30,30);
  .oh;
  li{
    .fl;
    .w(150);
    .p(10,0,10,0);
    .bc(#9f40ff);
    .br(36);
    img{
      .w(72);
      .h(72);
      .db;
      margin: 0 auto;
    }
    span{
      .db;
      .w(150);
      .tc;
      .c(#fff);
      .fs(24);
      .lh(24);
      .mt(10);
    }
  }
  li~li{
    .ml(30);
  }
}
.headline{
  .p(0,30,0,30);
  .bc(#d666ff);
  .pr;
  b{
    .dib;
    .p(18,18,18,18);
    text-align: justify;
    .w(66);
    .h(66);
    .c(#fff);
    .fs(28);
    .lh(34);
  }
  i{
    .dib;
    .c(#fcf5ff);
    .fs(20);
    .lh(24);
    .mb(18);
    .ml(8);
  }
  img{
    .w(246);
    .h(110);
    .pa;
    .l(400);
    .b(0);
  }
}
.middle{
  .bc(#f8e5ff);
  .p(32,30,0,30);
  .hot{
    .w(690);
    .h(319);
    .pr;
    background: url("../img/home_hot_bg.png");
    .bgs(691,319);
    img{
      .pa;
      .t(38);
      .r(34);
      .w(273);
      .h(239);
    }
    h3{
      .pa;
      .t(0);
      .l(0);
      .fl;
      .bdr(18);
      .w(150);
      .lh(50);
      .bc(#cf4cff);
      .tc;
      .c(#fff);
      .fs(24);
    }
    .titleM{
      .pa;
      .t(60);
      .l(70);
      .db;
      .w(320);
      .fs(32);
      .c(#fff);
      .lh(46);

    }
    .title{
      .fs(24);
      font-family: 宋体;
      color: #ebf1f2;
      .lh(24);
      .pa;
      .t(166);
      .l(70);
    }
    .price{
      .pa;
      .t(204);
      .l(70);
      .c(#ff3352);
      .fs(24);
      em{
        .fs(40);
      }
    }
    .buy{
      .pa;
      .b(22);
      .l(70);
      .w(122);
      .lh(40);
      .tc;
      .bc(#ff3352);
      .bdr(12);
      .c(#ffd6dc);
      .fs(24);
    }
  }
  .boom,.new{
    .w(690);
    .h(312);
    .bdr(36);
    background: #0aa6ee;
    .mt(32);
    .pr;
    h3{
      .pa;
      .t(0);
      .l(0);
      .fl;
      .bdr(18);
      .w(150);
      .lh(50);
      .bc(#cf4cff);
      .tc;
      .c(#fff);
      .fs(24);
    }
    img{
      .pa;
      .t(86);
      .l(64);
      .w(235);
      .h(179);
    }
    .titleM{
      .pa;
      .l(350);
      .t(60);
      .fs(32);
      .lh(44);
      .c(#fff);
    }
    .title{
      .fs(24);
      font-family: 宋体;
      color: #ebf1f2;
      .lh(24);
      .pa;
      .t(170);
      .l(350);
    }
    .price{
      .pa;
      .t(204);
      .l(350);
      .c(#ff3352);
      .fs(24);
      em{
        .fs(40);
      }
    }
    .buy{
      .pa;
      .b(10);
      .l(350);
      .w(122);
      .lh(40);
      .tc;
      .bc(#ff3352);
      .bdr(12);
      .c(#ffd6dc);
      .fs(24);
    }
  }
  .new{
    .h(316);
    background: #dd7fff;
    .buy{
      .b(14);
    }
    img{
      .w(216);
      .h(232);
      .t(74);
    }

  }
}
.guess{
  .w(690);
  .h(320);
  .m(46,30,98,30);
  .mt(46);
  .bc(#dd7fff);
  .bdr(22);
  .pr;
  h3{
    .pa;
    .t(0);
    .l(0);
    .fl;
    .bdr(18);
    .w(150);
    .lh(50);
    .bc(#cf4cff);
    .tc;
    .c(#fff);
    .fs(24);
  }
  ul{
    .pa;
    .oh;
    .l(26);
    .t(58);
    .w(640);
    li{
      .fl;
      .w(300);
      .bc(#fff);
      .pb(6);
      img{
        .dib;
        .w(300);
      }
      b{
        .fl;
        .dib;
        .w(164);
        .tc;
        .fs(24);
        .lh(40);
        .c(#333333);
      }
      .buy{
        .dib;
        .lh(40);
        .w(122);
        .c(#ffd6dc);
        .fs(24);
        .tc;
        .bc(#ff3352);
        .bdr(14);
      }
    }
    li~li{
      .ml(40);
    }
  }
}
footer{
  .bc(#ebb2ff);
  .w(690);
  .db();
  .h(98);
  .pf();
  bottom: 0;left: 0;
  .p(0,30,0,30);
  .option1 i{
    background: url("../img/home_f_index.png")no-repeat;
    .w(46);
    .h(46);
    .bgs(46,46);
  }
  .option2 i{
    background: url("../img/home_f_class.png")no-repeat;
    .bgs(46,46);
    .w(46);
    .h(46);
  }
  .option3 i{
    background: url("../img/home_f_shopcart.png")no-repeat;
    .bgs(51,46);
    .w(51);
    .h(46);
  }
  .option4 i{
    background: url("../img/home_f_user.png") no-repeat;
    .bgs(41,46);
    .w(41);
    .h(46);
  }
  .option1,.option2,.option3,.option4{
    .fl();
    .w(78);
    .mt(8);
    i{
      .db();
      margin: 0 auto;
    }
    b{
      .db();
      .tc();
      .lh(24);
      .w(78);
      .fs(20);
      .mt(10);
      .c(#333333);
    }
  }
  div~div{
    .ml(126);
  }


}